<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Unity中Canvas及三种渲染模式 BucketHead关注 12018.08.18 19:32:51字数 844阅读 13,969 1. 什么是Canvas使用UGUI来进行UI开发，离不开Canvas组件，所有的 UI 元素，要么自己包含 Canvas 组件，要么是 Canvas 组件所在 GameObject 的子节点。 2. 如何创建 Canvas你在 Hierarchy 视图创建任何">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="Unity中Canvas及三种渲染模式 BucketHead关注 12018.08.18 19:32:51字数 844阅读 13,969 1. 什么是Canvas使用UGUI来进行UI开发，离不开Canvas组件，所有的 UI 元素，要么自己包含 Canvas 组件，要么是 Canvas 组件所在 GameObject 的子节点。 2. 如何创建 Canvas你在 Hierarchy 视图创建任何">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/3a74bed7-7c6d-405f-9bf0-8ec2fe7c3e34.jpg">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/13097306-d3892db758a43812.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/13097306-85d309ceb39688fc.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/13097306-a21df121e7a8b8ca.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/13097306-2ceb84add258a833.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/13097306-a9cbda1a02e6d487.png">
<meta property="og:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/13097306-6f31845ec870f334.png">
<meta property="article:published_time" content="2022-02-27T10:10:52.868Z">
<meta property="article:modified_time" content="2022-03-06T12:01:01.467Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/3a74bed7-7c6d-405f-9bf0-8ec2fe7c3e34.jpg">
  
    <link rel="alternate" href="/notes-on-computer-expertise/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="shortcut icon" href="/notes-on-computer-expertise/favicon.png">
  
  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typeface-source-code-pro@0.0.71/index.min.css">

  
  
<link rel="stylesheet" href="/notes-on-computer-expertise/css/style.css">

  
    
<link rel="stylesheet" href="/notes-on-computer-expertise/fancybox/jquery.fancybox.min.css">

  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/notes-on-computer-expertise/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/notes-on-computer-expertise/">Home</a>
        
          <a class="main-nav-link" href="/notes-on-computer-expertise/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/notes-on-computer-expertise/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://goofyer.gitee.io/notes-on-computer-expertise"></form>
      </div>
    </div>
  </div>
</header>

      <div class="outer">
        <section id="main"><article id="post-炉石传说/第一步开发游戏选择界面" class="h-entry article article-type-post" itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
  <div class="article-meta">
    <a href="/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/" class="article-date">
  <time class="dt-published" datetime="2022-02-27T10:10:52.868Z" itemprop="datePublished">2022-02-27</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="e-content article-entry" itemprop="articleBody">
      
        <h1 id="Unity中Canvas及三种渲染模式"><a href="#Unity中Canvas及三种渲染模式" class="headerlink" title="Unity中Canvas及三种渲染模式"></a>Unity中Canvas及三种渲染模式</h1><p><a target="_blank" rel="noopener" href="https://www.jianshu.com/u/dd75772068cc"><img src="3a74bed7-7c6d-405f-9bf0-8ec2fe7c3e34.jpg" alt="img"></a></p>
<p><a target="_blank" rel="noopener" href="https://www.jianshu.com/u/dd75772068cc">BucketHead</a>关注</p>
<p>12018.08.18 19:32:51字数 844阅读 13,969</p>
<h4 id="1-什么是Canvas"><a href="#1-什么是Canvas" class="headerlink" title="1. 什么是Canvas"></a><strong>1. 什么是Canvas</strong></h4><p>使用UGUI来进行UI开发，离不开Canvas组件，所有的 UI 元素，要么自己包含 Canvas 组件，要么是 Canvas 组件所在 GameObject 的子节点。</p>
<h4 id="2-如何创建-Canvas"><a href="#2-如何创建-Canvas" class="headerlink" title="2. 如何创建 Canvas"></a>2. 如何创建 Canvas</h4><p>你在 Hierarchy 视图创建任何一个 UI 元素（比如Image）都会自动生成一个 Canvas 作为它的父节点。你也可以可以直接创建一个 Canvas，然后添加其他 UI 元素作为其子节点。</p>
<h4 id="3-Canvas-组件的RenderMode-参数"><a href="#3-Canvas-组件的RenderMode-参数" class="headerlink" title="3. Canvas 组件的RenderMode 参数"></a>3. Canvas 组件的RenderMode 参数</h4><p>Canvas 组件的参数 RenderMode，有三个选项：Screen Space - Overlay、Screen Space - Camera、World Space。</p>
<p><img src="13097306-d3892db758a43812.png" alt="img"></p>
<p>Canvas 的 RenderMode 参数</p>
<h4 id="4-Screen-Space-Overlay-模式"><a href="#4-Screen-Space-Overlay-模式" class="headerlink" title="4. Screen Space - Overlay 模式"></a>4. Screen Space - Overlay 模式</h4><p>Canvas 覆盖屏幕，且永远覆盖在其它元素的上层，也就是说 UI 会遮挡场景中的其它元素。</p>
<p><img src="13097306-85d309ceb39688fc.png" alt="img"></p>
<p>Overlay 模式下 UI 总是渲染在3d元素的上面</p>
<p>当 RenderMode 为 Screen Space - Overlay时，Canvas的其它参数包括：</p>
<blockquote>
<p>Pixel Perfect：UI元素精确到像素对齐，边缘更清晰，但是在UI调整和适配时会有更大的计算量（个人理解）</p>
<p>Sort Order：Canvas 的深度。多个 存在多个Canvas时，Sort Order 值更大的Canvas会遮盖住 Sort Order 值小的 Canvas</p>
<p>注：多个 Canvas 深度取值相等时，Hierarchy 视图中后面的 Canvas 显示在下，这一点与 UI 元素（如Image的规则相反）</p>
</blockquote>
<h4 id="5-Screen-Space-Camera-模式"><a href="#5-Screen-Space-Camera-模式" class="headerlink" title="5. Screen Space - Camera 模式"></a>5. Screen Space - Camera 模式</h4><p>和 Overlay 模式相仿，Canvas覆盖整个屏幕空间画布也是填满整个屏幕空间。不同之处在于，Canvas 被放置于指定摄像机的前方。</p>
<p><img src="13097306-a21df121e7a8b8ca.png" alt="img"></p>
<p>Canvas 被放置在摄像机的前方</p>
<p>这种模式下面 UI 并不一定能渲染在 3d 元素之上</p>
<p><img src="13097306-2ceb84add258a833.png" alt="img"></p>
<p>Camera 模式下，3d 元素可能渲染在UI之上</p>
<p>且</p>
<blockquote>
<p>(1) 必须在摄像机的远近平面之间才会被渲染</p>
<p>(2) 即使摄像机是 Perspective 模式，Canvas 距离摄像机的远近依然不会影响其显示大小</p>
<p>(3) 其它3元素可以和 Canvas 产生遮挡关系，距离摄像机更近的元素会遮盖住 Canvas 上面的 UI</p>
<p>(4) 摄像机的缩放/平移/旋转，以及 fov 的变化，不会影响 Canvas 显示结果，Canvas 永远是放置在距离摄像机视口一定距离的地方，且与摄像机水平视线垂直</p>
</blockquote>
<p>Screen Space - Camera 的参数包括：</p>
<p><img src="13097306-a9cbda1a02e6d487.png" alt="img"></p>
<p>Screen Space - Camera 模式 Canvas 的参数</p>
<p>Pixel Perfect ：同 Overlay 模式含义</p>
<p>Render Camera ：指定的用来渲染 Canvas 的摄像机</p>
<p>Plane Distance：Canvas 平面距离摄像机的距离</p>
<p>Sorting Layer：指示 Canvas 的深度，可以手动添加。当存在多个模式为 Screen Space 的 Canvas 时，Sorting Layer 决定了显示的优先级。</p>
<p>Order in Layer：多个 Canvas 具有相同的 Sorting Layer 时，根据 Order in Layer 来确定显示优先级。</p>
<h4 id="5-World-Space-模式"><a href="#5-World-Space-模式" class="headerlink" title="5. World Space 模式"></a>5. World Space 模式</h4><p>此种模式下，Canvas 与场景中其它3D元素没有区别</p>
<p><img src="13097306-6f31845ec870f334.png" alt="img"></p>
<p>World space 模式的Canvas 本质上就是3d 元素</p>
<p>此时</p>
<blockquote>
<p>Canvas 可以调整 RectTransform 的数值</p>
<p>摄像机的平移旋转缩放及fov都会影响 Canvas 的显示</p>
<p>需要 EventCamera 来指定接受事件的摄像机</p>
</blockquote>
<h4 id="6-总结"><a href="#6-总结" class="headerlink" title="6. 总结"></a>6. 总结</h4><p>不同模式的 Canvas之间，Screen Space - Overlay 的 Canvas 永远显示在最前面，Screen Space - Camera 和 World 的显示关系决定于 World Canvas 距离摄像机的位置以及 Screen Space - Camera Canvas 的 Plane Distance</p>
<p>相同的 Screen Space - Overlay Canvas ：显示优先级由 Sort Order 确定</p>
<p>相同的 Screen Space - Camera：显示优先级由 Sorting Layer 和 Order in Layer 确定</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://goofyer.gitee.io/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/%E7%AC%AC%E4%B8%80%E6%AD%A5%E5%BC%80%E5%8F%91%E6%B8%B8%E6%88%8F%E9%80%89%E6%8B%A9%E7%95%8C%E9%9D%A2/" data-id="cl403sxse0041f8vubj8shmt3" data-title="" class="article-share-link">Share</a>
      
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/notes-on-computer-expertise/2022/02/27/%E7%82%89%E7%9F%B3%E4%BC%A0%E8%AF%B4/unity%E7%9A%84canves%E7%9F%A5%E8%AF%86%E8%A1%A5%E5%85%85/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          (no title)
        
      </div>
    </a>
  
  
    <a href="/notes-on-computer-expertise/2022/02/23/python/python%E7%BC%96%E5%86%99%E5%B0%8F%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title"></div>
    </a>
  
</nav>

  
</article>


</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/C-%E5%B7%A5%E5%85%B7/">C#工具</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/C-%E5%B7%A5%E5%85%B7/">C++工具</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/Mysql/">Mysql</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/blender/">blender</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/linux/">linux</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/manim/">manim</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/spring/">spring</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/vba%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/">vba基础操作</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E5%88%9B%E9%80%A0%E6%A8%A1%E5%BC%8F/">创造模式</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/">操作系统</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/">操作系统基础知识</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%BC%80%E5%8F%91/">操作系统开发</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E5%AD%A6/">数学</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/">数据结构基础知识</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%A8%A1%E6%9D%BF/">模板</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/">深度学习</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%8B%B1%E8%AF%AD/">英语</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%99%9A%E5%B9%BB4/">虚幻4</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BB%84%E6%88%90%E5%8E%9F%E7%90%86/">计算机组成原理</a></li><li class="category-list-item"><a class="category-list-link" href="/notes-on-computer-expertise/categories/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/">计算机网络</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/notes-on-computer-expertise/tags/C/" rel="tag">C++</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/notes-on-computer-expertise/tags/C/" style="font-size: 10px;">C++</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/05/">May 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/03/">March 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/02/">February 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2022/01/">January 2022</a></li><li class="archive-list-item"><a class="archive-list-link" href="/notes-on-computer-expertise/archives/2021/12/">December 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/31/vue/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6%E9%AA%8C%E8%AF%81%E7%A0%81%E6%97%A0%E6%B3%95%E6%98%BE%E7%A4%BA/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/26/%E6%95%B0%E6%8D%AE%E5%BA%93/navicat%E5%AE%89%E8%A3%85/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/25/%E8%99%9A%E5%B9%BB4%E5%BC%95%E6%93%8E%E5%BC%80%E5%8F%91/%E8%99%9A%E5%B9%BB%E5%9B%9B%20mod%E5%88%B6%E4%BD%9C/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/23/python/python%E6%89%B9%E9%87%8F%E7%94%9F%E6%88%90%E6%95%B0%E6%8D%AE/">(no title)</a>
          </li>
        
          <li>
            <a href="/notes-on-computer-expertise/2022/05/23/vba%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C%E7%AC%94%E8%AE%B0/EXCEL%E5%9F%BA%E7%A1%80%E6%95%99%E7%A8%8B/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      
      &copy; 2022 John Doe<br>
      Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="/notes-on-computer-expertise/" class="mobile-nav-link">Home</a>
  
    <a href="/notes-on-computer-expertise/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    


<script src="/notes-on-computer-expertise/js/jquery-3.4.1.min.js"></script>



  
<script src="/notes-on-computer-expertise/fancybox/jquery.fancybox.min.js"></script>




<script src="/notes-on-computer-expertise/js/script.js"></script>





  </div>
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML"></script>
</body>
</html>